import React, { FC, useEffect, useState } from "react"
import { Space, Typography } from "antd"
import { createFromIconfontCN } from "@ant-design/icons"
import styles from "./Logo.module.scss"
import { Link } from "react-router-dom"
import useGetUserInfo from "../hooks/useGetUserInfo"
import { HOME_PATHNAME, MANGE_INDEX_PATHNAME } from "../router"
const { Title } = Typography

// 自定义icon
const MyIcon = createFromIconfontCN({
    scriptUrl: "//at.alicdn.com/t/c/font_4837928_4rnfro552ic.js"
})

const Logo: FC = () => {
    const { username } = useGetUserInfo()

    const [pathname, setPathname] = useState(HOME_PATHNAME) // 默认跳转路径
    // console.log(username)

    useEffect(() => {
        if (username) {
            // 说明登录了,就跳转到我的问卷目录
            setPathname(MANGE_INDEX_PATHNAME)
            // console.log(1)
        }
    }, [username])

    return (
        <div className={styles.container}>
            <Link to={pathname}>
                {/* space主要是使得两个title之间有间隙，不会变的拥挤 */}
                <Space>
                    {/* title渲染出来就是h1，可以设置level属性 */}
                    <Title>
                        {/* icon */}
                        {/* type是在网站中的icon名称 */}
                        <MyIcon type="icon-toupiao" />
                    </Title>
                    <Title>问卷星途</Title>
                </Space>
            </Link>
        </div>
    )
}

export default Logo
